import React, { useState } from 'react'
import { LockOutlined, UserOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { Button, Form, Input, message} from 'antd';
import { useNavigate } from 'react-router-dom'
export default function LoginFrom() {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const [loading, setloading] = useState(false)
  const onFinish = (values) => {
      navigate('/login')
      };
      const onReset = (values) => {
    message.success('注册成功 ，请登录!');
    navigate('/login')
  }
  return (
    <Form
      name="normal_login"
      className="login-form"
      form={form}
      onFinish={onFinish}>
        <span className='input_title'>用户名</span>
      <Form.Item
        name="username">
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名(admin)" />
      </Form.Item>
      <span className='input_title'>密码</span>
      <Form.Item
        name="password">
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请输入密码(123456)"/>
      </Form.Item>
      <span className='input_title'>再次输入密码</span>
      <Form.Item
        name="password">
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请再次输入密码(123456)"/>
      </Form.Item>
      <Form.Item>
        <div className="loginButton">
          <Button type="primary" htmlType="submit" className="login-form-button" icon={<UserOutlined />} size="large" loading={loading}>登录</Button>
          <Button icon={<CloseCircleOutlined />} size="large" onClick={onReset}>注册</Button>
        </div>
      </Form.Item>
    </Form>
  )
}